<!DOCTYPE html>
<html lang="en">
<head>
    <!--收费管理-> 4,收银结算（仅小区物业管理人员可用）-->
    <meta charset="UTF-8">
    <title>收银结算</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css"/>
    <script src="../js/jquery.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../plugins/layui/layui.js"></script>
    <style>
        table{
             text-align: center;
        }

      span{
          color: red;
      }

    </style>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <h1  style="font-weight: bolder;text-shadow:5px 5px 5px burlywood ">首页>收费管理>收银结算</h1>
        </div>
    </div>

    <!-- 点击查询-->
    <div class="row">
        <div class="col-md-11">
            <select style="height: 31px" id="select1">
                <option value="1" selected>房主名</option>
                <option value="2">房间号</option>
            </select>
            <input style="height: 33px" placeholder="请输入所选项" type="text" id="chaxun"/>
            <button id="chaxu5" class="glyphicon glyphicon-search btn btn-primary"></button>
            <button class="glyphicon glyphicon-search btn btn-primary" id="chaxunsuoyou">查询所有</button>
        </div>
        <div class="col-md-1">
            <button id="jiesuanbuttion" class="glyphicon glyphicon-yen btn btn-primary">结算</button>
        </div>
    </div>

    <div class="row" style="overflow: scroll;height:800px;">
        <div  class="col-md-12">
            <table style="table-layout: fixed"  class="table table-hover table-striped table-bordered" id="tableone3">
                <tr style="position: sticky;top:0;z-index: 999;font-weight: bolder;font-size: larger">
                    <td>
                        请选择
                    </td>
                    <td>编号</td>
                    <td>姓名</td>
                    <td>房间号</td>
                    <td>费用名称</td>
                    <td>单价</td>
                    <td>数量</td>
                    <td>费用</td>
                    <td>账单日</td>
                    <td>手机号</td>
                </tr>
            </table>
        </div>
    </div>
</div>
<input hidden id="span"/>
<!--(4)收费管理→收银结算-->
<div  class="modal fade" id="addmyModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h1 class="modal-title" id="myModalLabel">结算</h1>
            </div>
            <div class="modal-body">
                <div class="form-group has-feedback">
                    <label>业主</label>
                    <span  class="glyphicon glyphicon-yen"></span>
                    <input id="yezhu" readonly/>元
                </div>
                <div class="form-group has-feedback">
                    <label >缴费类型</label>
                    <span  class="glyphicon glyphicon-yen"></span>
                    <input id="jiaofeileix" readonly/>
                </div>
                <div class="form-group has-feedback">
                    <label >应收金额</label>
                    <span  class="glyphicon glyphicon-yen"></span>
                    <input id="ysje" readonly/>元
                </div>
                <div class="form-group has-feedback">
                    <span class="glyphicon glyphicon-certificate"></span>
                    <label>缴费操作人</label>
                    <input id="jfr" placeholder="请填写缴费人..."/>
                </div>
                <div class="form-group has-feedback">
                    <span class="glyphicon glyphicon-certificate"></span>
                    <label >缴费方式</label>
                    <select id="jffs">
                        <option selected>现金</option>
                        <option>支付宝</option>
                    </select>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id="button02" type="button" class="btn btn-primary">提交</button>
            </div>
        </div>
    </div>
</div>
</body>

<script type="text/javascript">

    /**f
     * 点击查询所有
     */
    $("#chaxunsuoyou").on("click",function(){
        window.location.reload();
    })

    /**
     * 点击查询单个
     */
    $("#chaxu5").on("click",function(){
        let tex = $("#chaxun").val()
        console.log(tex)
        if(tex==""){
            Dialogs("请填写信息","red")
            return ;
        }
        let fangshi = $("#select1").val()
        $.ajax({
            url:"chaxunfout",
            type:"post",
            dataType:"json",
            data:{
                fangshi:fangshi,
                text:tex
            },
            success:function (data){
                $("#tableone3 tr:not(:first)").remove()
                for(let obj of data){
                    add(obj)
                }
            }
        });
    });

    /**
     * 结算
     */
    $("#jiesuanbuttion").on("click",function(){
      let a  =$("input[name=rad]:checked").val();
        if(a==undefined){
            succ("请选择缴费业主")
            return
        }
        $("#addmyModal3").modal("show")
       let arr =  a.split("*")
        $("#span").val(arr[0])
        $("#yezhu").val(arr[1])
        $("#ysje").val(arr[2])
        $("#jiaofeileix").val(arr[3])
    });

    /**
     * 确定结算
     */
    $("#button02").on("click",function(){
        let zhifufangshi = $("#jffs").val()
        if(zhifufangshi=="现金"){
            $.ajax({
                url:"jieshuan",
                type:"post",
                dataType:"json",
                data:{
                    "did":$("#span").val()
                },
                success:function (data){
                    if(data){
                        succ("缴费成功！")
                    }else{
                        succ("缴费失败！未知异常")
                    }
                }
            });
        }else {
            // let total="888"//金额
            // let bodys="刘备"//缴费人
            // let subject="水费"//缴费名称
            //支付宝
            localStorage.setItem("total",$("#ysje").val())
            localStorage.setItem("bodys",$("#yezhu").val())
            localStorage.setItem("subject",$("#jiaofeileix").val())
            localStorage.setItem("vids",$("#span").val())
            window.parent.open("../alipayPage.html","_blank")
        }



    });
    /**
     * 加载全部数据
     */
    $.ajax({
        url:"getallfeiyongcuijiao",
        type:"get",
        dataType:"json",
        success:function (data){
            for(let obj of data){
                add(obj)
            }
        }
    });

    /**
     * 加载组件并赋值
     */
    function add(obj){
        let tr =  document.createElement("tr");
        let td0 =  document.createElement("td");
        let radio = document.createElement("input");
        radio.type="radio"
        radio.name="rad"
        radio.value=obj.D_id+"*"+obj.Hname+"*"+obj.summoney+"*"+obj.S_Name
        $(td0).append(radio)
        let td1 =  document.createElement("td");
        td1.innerText=obj.D_id
        let td2 =  document.createElement("td");
        td2.innerText=obj.Hname
        let td3 =  document.createElement("td");
        td3.innerText=obj.vname+obj.ttname+obj.Uname+obj.honame
        let td4 =  document.createElement("td");
        td4.innerText=obj.S_Name
        let td5 =  document.createElement("td");
        td5.innerText=obj.S_money
        let td6 =  document.createElement("td");
        td6.innerText=obj.D_sum
        let td7 =  document.createElement("td");
        td7.innerText=obj.summoney
        let td8 =  document.createElement("td");
        td8.innerText= obj.D_billdate.year+"-"+obj.D_billdate.monthValue+"-"+obj.D_billdate.dayOfMonth
        let td9 = document.createElement("td");
        td9.innerText=obj.Htel
        $(td9).attr("name","shouji")
        $(td9).val(obj.D_id)
        $(tr).append(td0,td1,td2,td3,td4,td5,td6,td7,td8,td9)
        $("#tableone3").append(tr)
    }


    function Dialogs(text,color){
        layer.open({
            content: '执行结果:'+text.fontcolor(color)
            ,offset:'100px'
            ,time:'3000'
            ,success:function(layero, index) {
                var timeNum = this.time/1000, setText = function(start){
                    layer.title((start ? timeNum : --timeNum) + ' 秒后关闭', index);
                };
                setText(!0);
                this.timer = setInterval(setText, 1000);
                if(timeNum <= 0) clearInterval(this.timer);
            }
        });
    };

    function succ(mags){
        layer.confirm('执行结果： '+mags.fontcolor("green"), {
                offset: '100px'
                , btn: ['确定'] //按钮
            }, function(){
                window.location.reload()
            }
        );
    }
</script>
</html>